<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - 饮食营养管理系统</title>
    <!-- TailwindCSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <!-- Vue.js CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body class="bg-gray-50">
    <div id="app" class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <nav class="bg-emerald-600 text-white shadow-md">
            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-leaf text-2xl"></i>
                    <span class="text-xl font-bold">营养师后台管理系统</span>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="#" class="hover:text-emerald-200">
                        <i class="fas fa-bell"></i>
                        <span class="bg-red-500 text-white rounded-full w-5 h-5 text-xs flex items-center justify-center absolute -mt-8 ml-3">3</span>
                    </a>
                    <div class="relative group">
                        <div class="flex items-center space-x-2 cursor-pointer">
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=150&h=150&q=80" 
                                class="w-8 h-8 rounded-full object-cover" alt="用户头像">
                            <span>管理员</span>
                            <i class="fas fa-chevron-down text-xs"></i>
                        </div>
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden group-hover:block">
                            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                                <i class="fas fa-user mr-2"></i>个人信息
                            </a>
                            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                                <i class="fas fa-cog mr-2"></i>系统设置
                            </a>
                            <div class="border-t border-gray-200 my-1"></div>
                            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容区 -->
        <div class="flex flex-1">
            <!-- 侧边导航 -->
            <aside class="bg-white w-64 shadow-md">
                <div class="p-4">
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                            <i class="fas fa-search text-gray-400"></i>
                        </span>
                        <input type="text" class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" 
                            placeholder="搜索...">
                    </div>
                </div>
                <nav class="mt-2">
                    <a href="index.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-home mr-3"></i>
                        <span>仪表盘</span>
                    </a>
                    <a href="users.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-users mr-3"></i>
                        <span>用户管理</span>
                    </a>
                    <a href="foods.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-apple-alt mr-3"></i>
                        <span>食物数据库</span>
                    </a>
                    <a href="recipes.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-utensils mr-3"></i>
                        <span>食谱管理</span>
                    </a>
                    <a href="diet-records.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-clipboard-list mr-3"></i>
                        <span>饮食记录</span>
                    </a>
                    <a href="nutrition.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-chart-pie mr-3"></i>
                        <span>营养分析</span>
                    </a>
                    <a href="settings.html" class="flex items-center px-4 py-3 text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600">
                        <i class="fas fa-cog mr-3"></i>
                        <span>系统设置</span>
                    </a>
                </nav>
            </aside>

            <!-- 主内容 -->
            <main class="flex-1 p-6">
                <div class="mb-6">
                    <h1 class="text-2xl font-bold text-gray-800">系统设置</h1>
                    <p class="text-gray-600">管理系统配置、数据备份和权限设置</p>
                </div>

                <!-- 设置选项卡 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
                    <div class="flex border-b">
                        <button class="tab-btn px-6 py-3 text-gray-700 hover:text-emerald-600" data-tab="basic" :class="{'border-b-2 border-emerald-600 text-emerald-600 font-medium': currentTab === 'basic'}">
                            基本设置
                        </button>
                        <button class="tab-btn px-6 py-3 text-gray-700 hover:text-emerald-600" data-tab="category" :class="{'border-b-2 border-emerald-600 text-emerald-600 font-medium': currentTab === 'category'}">
                            分类管理
                        </button>
                        <button class="tab-btn px-6 py-3 text-gray-700 hover:text-emerald-600" data-tab="permission" :class="{'border-b-2 border-emerald-600 text-emerald-600 font-medium': currentTab === 'permission'}">
                            权限设置
                        </button>
                        <button class="tab-btn px-6 py-3 text-gray-700 hover:text-emerald-600" data-tab="backup" :class="{'border-b-2 border-emerald-600 text-emerald-600 font-medium': currentTab === 'backup'}">
                            数据备份
                        </button>
                        <button class="tab-btn px-6 py-3 text-gray-700 hover:text-emerald-600" data-tab="notification" :class="{'border-b-2 border-emerald-600 text-emerald-600 font-medium': currentTab === 'notification'}">
                            通知设置
                        </button>
                    </div>

                    <!-- 基本设置面板 -->
                    <div class="tab-panel p-6" v-show="currentTab === 'basic'">
                        <div class="max-w-3xl mx-auto">
                            <h2 class="text-lg font-medium text-gray-800 mb-6">基本设置</h2>
                            
                            <!-- 系统信息 -->
                            <div class="mb-8">
                                <h3 class="text-md font-medium text-gray-700 mb-4">系统信息</h3>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">系统名称</label>
                                        <input type="text" value="营养师后台管理系统" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">系统版本</label>
                                        <input type="text" value="v1.2.0" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" readonly>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">管理员邮箱</label>
                                        <input type="email" value="admin@nutritionist.com" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
                                        <input type="tel" value="18012345678" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 系统参数 -->
                            <div class="mb-8">
                                <h3 class="text-md font-medium text-gray-700 mb-4">系统参数</h3>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">数据缓存时间(分钟)</label>
                                        <input type="number" value="30" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">每页显示条目数</label>
                                        <select class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                            <option value="10">10</option>
                                            <option value="20" selected>20</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">默认语言</label>
                                        <select class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                            <option value="zh-CN" selected>简体中文</option>
                                            <option value="en-US">English</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">时区设置</label>
                                        <select class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                            <option value="Asia/Shanghai" selected>Asia/Shanghai (GMT+8)</option>
                                            <option value="America/New_York">America/New_York (GMT-5)</option>
                                            <option value="Europe/London">Europe/London (GMT+0)</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 功能开关 -->
                            <div class="mb-8">
                                <h3 class="text-md font-medium text-gray-700 mb-4">功能开关</h3>
                                <div class="space-y-4">
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">用户注册</h4>
                                            <p class="text-xs text-gray-500">允许新用户注册账号</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer" checked>
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">用户食谱创建</h4>
                                            <p class="text-xs text-gray-500">允许普通用户创建自定义食谱</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer" checked>
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">自动营养分析</h4>
                                            <p class="text-xs text-gray-500">自动为用户生成营养分析报告</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer" checked>
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">用户食物贡献</h4>
                                            <p class="text-xs text-gray-500">允许用户提交食物数据至系统</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer">
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">系统维护模式</h4>
                                            <p class="text-xs text-gray-500">开启后仅管理员可访问系统</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer">
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- 保存按钮 -->
                            <div class="flex justify-end">
                                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md mr-2">
                                    取消
                                </button>
                                <button class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md">
                                    保存设置
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 分类管理面板 -->
                    <div class="tab-panel p-6" v-show="currentTab === 'category'">
                        <div class="max-w-3xl mx-auto">
                            <h2 class="text-lg font-medium text-gray-800 mb-6">分类管理</h2>

                            <!-- 分类管理切换选项卡 -->
                            <div class="border-b border-gray-200 mb-6">
                                <ul class="flex -mb-px">
                                    <li class="mr-2">
                                        <a href="#" class="inline-block py-2 px-4 text-emerald-600 border-b-2 border-emerald-600 font-medium" aria-current="page">食物分类</a>
                                    </li>
                                    <li class="mr-2">
                                        <a href="#" class="inline-block py-2 px-4 text-gray-500 hover:text-emerald-600 border-b-2 border-transparent hover:border-emerald-300">食谱分类</a>
                                    </li>
                                    <li class="mr-2">
                                        <a href="#" class="inline-block py-2 px-4 text-gray-500 hover:text-emerald-600 border-b-2 border-transparent hover:border-emerald-300">饮食标签</a>
                                    </li>
                                </ul>
                            </div>

                            <!-- 分类列表与操作 -->
                            <div class="mb-6">
                                <!-- 添加分类按钮 -->
                                <div class="flex justify-between items-center mb-4">
                                    <h3 class="text-md font-medium text-gray-700">食物分类列表</h3>
                                    <button class="flex items-center text-sm bg-emerald-600 hover:bg-emerald-700 text-white px-3 py-1.5 rounded-md">
                                        <i class="fas fa-plus mr-1"></i> 添加分类
                                    </button>
                                </div>

                                <!-- 分类列表 -->
                                <div class="bg-white rounded-md border border-gray-200">
                                    <ul class="divide-y divide-gray-200">
                                        <li class="flex items-center justify-between p-4 hover:bg-gray-50">
                                            <div class="flex items-center">
                                                <i class="fas fa-folder text-emerald-500 mr-3"></i>
                                                <div>
                                                    <p class="font-medium text-gray-800">水果类</p>
                                                    <p class="text-sm text-gray-500">共包含56个食物</p>
                                                </div>
                                            </div>
                                            <div class="flex space-x-2">
                                                <button class="text-gray-600 hover:text-emerald-600">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-gray-600 hover:text-red-600">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="flex items-center justify-between p-4 hover:bg-gray-50">
                                            <div class="flex items-center">
                                                <i class="fas fa-folder text-emerald-500 mr-3"></i>
                                                <div>
                                                    <p class="font-medium text-gray-800">蔬菜类</p>
                                                    <p class="text-sm text-gray-500">共包含82个食物</p>
                                                </div>
                                            </div>
                                            <div class="flex space-x-2">
                                                <button class="text-gray-600 hover:text-emerald-600">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-gray-600 hover:text-red-600">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="flex items-center justify-between p-4 hover:bg-gray-50">
                                            <div class="flex items-center">
                                                <i class="fas fa-folder text-emerald-500 mr-3"></i>
                                                <div>
                                                    <p class="font-medium text-gray-800">肉类</p>
                                                    <p class="text-sm text-gray-500">共包含43个食物</p>
                                                </div>
                                            </div>
                                            <div class="flex space-x-2">
                                                <button class="text-gray-600 hover:text-emerald-600">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-gray-600 hover:text-red-600">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="flex items-center justify-between p-4 hover:bg-gray-50">
                                            <div class="flex items-center">
                                                <i class="fas fa-folder text-emerald-500 mr-3"></i>
                                                <div>
                                                    <p class="font-medium text-gray-800">谷物类</p>
                                                    <p class="text-sm text-gray-500">共包含38个食物</p>
                                                </div>
                                            </div>
                                            <div class="flex space-x-2">
                                                <button class="text-gray-600 hover:text-emerald-600">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-gray-600 hover:text-red-600">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="flex items-center justify-between p-4 hover:bg-gray-50">
                                            <div class="flex items-center">
                                                <i class="fas fa-folder text-emerald-500 mr-3"></i>
                                                <div>
                                                    <p class="font-medium text-gray-800">乳制品</p>
                                                    <p class="text-sm text-gray-500">共包含27个食物</p>
                                                </div>
                                            </div>
                                            <div class="flex space-x-2">
                                                <button class="text-gray-600 hover:text-emerald-600">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-gray-600 hover:text-red-600">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <!-- 保存按钮 -->
                            <div class="flex justify-end">
                                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md mr-2">
                                    取消
                                </button>
                                <button class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md">
                                    保存设置
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 权限设置面板 -->
                    <div class="tab-panel p-6" v-show="currentTab === 'permission'">
                        <div class="max-w-3xl mx-auto">
                            <h2 class="text-lg font-medium text-gray-800 mb-6">权限设置</h2>
                            
                            <!-- 用户角色管理 -->
                            <div class="mb-8">
                                <h3 class="text-md font-medium text-gray-700 mb-4">用户角色管理</h3>
                                
                                <!-- 角色列表 -->
                                <div class="bg-white rounded-md border border-gray-200 mb-4">
                                    <ul class="divide-y divide-gray-200">
                                        <li class="flex items-center justify-between p-4 hover:bg-gray-50">
                                            <div class="flex items-center">
                                                <i class="fas fa-user-shield text-emerald-500 mr-3"></i>
                                                <div>
                                                    <p class="font-medium text-gray-800">系统管理员</p>
                                                    <p class="text-sm text-gray-500">拥有所有系统权限</p>
                                                </div>
                                            </div>
                                            <div class="flex space-x-2">
                                                <button class="text-gray-600 hover:text-emerald-600">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="flex items-center justify-between p-4 hover:bg-gray-50">
                                            <div class="flex items-center">
                                                <i class="fas fa-user-tie text-blue-500 mr-3"></i>
                                                <div>
                                                    <p class="font-medium text-gray-800">营养师</p>
                                                    <p class="text-sm text-gray-500">可管理食物、食谱和提供营养分析</p>
                                                </div>
                                            </div>
                                            <div class="flex space-x-2">
                                                <button class="text-gray-600 hover:text-emerald-600">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-gray-600 hover:text-red-600">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="flex items-center justify-between p-4 hover:bg-gray-50">
                                            <div class="flex items-center">
                                                <i class="fas fa-user text-indigo-500 mr-3"></i>
                                                <div>
                                                    <p class="font-medium text-gray-800">普通用户</p>
                                                    <p class="text-sm text-gray-500">可查看食谱和记录个人饮食</p>
                                                </div>
                                            </div>
                                            <div class="flex space-x-2">
                                                <button class="text-gray-600 hover:text-emerald-600">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-gray-600 hover:text-red-600">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="flex items-center justify-between p-4 hover:bg-gray-50">
                                            <div class="flex items-center">
                                                <i class="fas fa-user-plus text-green-500 mr-3"></i>
                                                <div>
                                                    <p class="font-medium text-gray-800">内容贡献者</p>
                                                    <p class="text-sm text-gray-500">可提交食物和食谱数据</p>
                                                </div>
                                            </div>
                                            <div class="flex space-x-2">
                                                <button class="text-gray-600 hover:text-emerald-600">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-gray-600 hover:text-red-600">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                
                                <!-- 添加角色按钮 -->
                                <button class="flex items-center text-sm bg-emerald-600 hover:bg-emerald-700 text-white px-3 py-1.5 rounded-md">
                                    <i class="fas fa-plus mr-1"></i> 添加角色
                                </button>
                            </div>
                            
                            <!-- 权限详细设置 -->
                            <div class="mb-8">
                                <h3 class="text-md font-medium text-gray-700 mb-4">权限详细设置</h3>
                                
                                <!-- 角色选择 -->
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">选择角色</label>
                                    <select class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                        <option value="">请选择角色</option>
                                        <option value="admin">系统管理员</option>
                                        <option value="nutritionist">营养师</option>
                                        <option value="user">普通用户</option>
                                        <option value="contributor">内容贡献者</option>
                                    </select>
                                </div>
                                
                                <!-- 权限列表 -->
                                <div class="space-y-4">
                                    <div class="border border-gray-200 rounded-md">
                                        <div class="bg-gray-50 px-4 py-3 border-b">
                                            <h4 class="font-medium text-gray-800">用户管理</h4>
                                        </div>
                                        <div class="p-4 grid grid-cols-2 gap-3">
                                            <div class="flex items-center">
                                                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                                <span class="text-sm text-gray-700">查看用户列表</span>
                                            </div>
                                            <div class="flex items-center">
                                                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                                <span class="text-sm text-gray-700">添加用户</span>
                                            </div>
                                            <div class="flex items-center">
                                                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                                <span class="text-sm text-gray-700">编辑用户</span>
                                            </div>
                                            <div class="flex items-center">
                                                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                                <span class="text-sm text-gray-700">删除用户</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="border border-gray-200 rounded-md">
                                        <div class="bg-gray-50 px-4 py-3 border-b">
                                            <h4 class="font-medium text-gray-800">食物数据库</h4>
                                        </div>
                                        <div class="p-4 grid grid-cols-2 gap-3">
                                            <div class="flex items-center">
                                                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                                <span class="text-sm text-gray-700">查看食物</span>
                                            </div>
                                            <div class="flex items-center">
                                                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                                <span class="text-sm text-gray-700">添加食物</span>
                                            </div>
                                            <div class="flex items-center">
                                                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                                <span class="text-sm text-gray-700">编辑食物</span>
                                            </div>
                                            <div class="flex items-center">
                                                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                                <span class="text-sm text-gray-700">删除食物</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="border border-gray-200 rounded-md">
                                        <div class="bg-gray-50 px-4 py-3 border-b">
                                            <h4 class="font-medium text-gray-800">食谱管理</h4>
                                        </div>
                                        <div class="p-4 grid grid-cols-2 gap-3">
                                            <div class="flex items-center">
                                                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                                <span class="text-sm text-gray-700">查看食谱</span>
                                            </div>
                                            <div class="flex items-center">
                                                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                                <span class="text-sm text-gray-700">创建食谱</span>
                                            </div>
                                            <div class="flex items-center">
                                                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                                <span class="text-sm text-gray-700">编辑食谱</span>
                                            </div>
                                            <div class="flex items-center">
                                                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                                <span class="text-sm text-gray-700">删除食谱</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 保存按钮 -->
                            <div class="flex justify-end">
                                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md mr-2">
                                    取消
                                </button>
                                <button class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md">
                                    保存设置
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 数据备份面板 -->
                    <div class="tab-panel p-6" v-show="currentTab === 'backup'">
                        <div class="max-w-3xl mx-auto">
                            <h2 class="text-lg font-medium text-gray-800 mb-6">数据备份</h2>
                            
                            <!-- 备份设置 -->
                            <div class="mb-8">
                                <h3 class="text-md font-medium text-gray-700 mb-4">自动备份设置</h3>
                                <div class="bg-gray-50 p-4 rounded-md border border-gray-200 mb-6">
                                    <div class="flex items-center justify-between mb-4">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">定期自动备份</h4>
                                            <p class="text-xs text-gray-500">系统将按设定频率自动备份数据</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer" checked>
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">备份频率</label>
                                            <select class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                                <option value="daily">每日备份</option>
                                                <option value="weekly" selected>每周备份</option>
                                                <option value="biweekly">每两周备份</option>
                                                <option value="monthly">每月备份</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">保留备份数量</label>
                                            <select class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                                <option value="3">保留最近3个</option>
                                                <option value="5" selected>保留最近5个</option>
                                                <option value="10">保留最近10个</option>
                                                <option value="all">保留所有备份</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">备份时间</label>
                                            <input type="time" value="03:00" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                            <p class="text-xs text-gray-500 mt-1">建议在系统负载较低时进行备份</p>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">备份存储位置</label>
                                            <select class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                                <option value="local" selected>本地存储</option>
                                                <option value="cloud">云存储</option>
                                                <option value="both">本地和云存储</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 手动备份 -->
                            <div class="mb-8">
                                <h3 class="text-md font-medium text-gray-700 mb-4">手动备份</h3>
                                <div class="flex space-x-3 mb-6">
                                    <button class="flex items-center bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md">
                                        <i class="fas fa-download mr-2"></i> 立即备份
                                    </button>
                                    <button class="flex items-center bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
                                        <i class="fas fa-upload mr-2"></i> 恢复备份
                                    </button>
                                </div>
                                
                                <!-- 备份历史 -->
                                <div class="border border-gray-200 rounded-md overflow-hidden">
                                    <table class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备份日期</th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备份类型</th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">文件大小</th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200">
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">2023-10-15 03:00:12</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">自动备份</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">28.5 MB</td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">成功</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                    <button class="text-blue-600 hover:text-blue-900 mr-3">下载</button>
                                                    <button class="text-red-600 hover:text-red-900">删除</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">2023-10-08 03:00:09</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">自动备份</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">27.8 MB</td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">成功</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                    <button class="text-blue-600 hover:text-blue-900 mr-3">下载</button>
                                                    <button class="text-red-600 hover:text-red-900">删除</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">2023-10-05 15:32:47</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">手动备份</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">27.6 MB</td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">成功</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                    <button class="text-blue-600 hover:text-blue-900 mr-3">下载</button>
                                                    <button class="text-red-600 hover:text-red-900">删除</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">2023-10-01 03:00:11</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">自动备份</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">26.4 MB</td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">成功</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                    <button class="text-blue-600 hover:text-blue-900 mr-3">下载</button>
                                                    <button class="text-red-600 hover:text-red-900">删除</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <!-- 保存按钮 -->
                            <div class="flex justify-end">
                                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md mr-2">
                                    取消
                                </button>
                                <button class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md">
                                    保存设置
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 通知设置面板 -->
                    <div class="tab-panel p-6" v-show="currentTab === 'notification'">
                        <div class="max-w-3xl mx-auto">
                            <h2 class="text-lg font-medium text-gray-800 mb-6">通知设置</h2>
                            
                            <!-- 系统通知设置 -->
                            <div class="mb-8">
                                <h3 class="text-md font-medium text-gray-700 mb-4">系统通知</h3>
                                <div class="space-y-4">
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">系统更新通知</h4>
                                            <p class="text-xs text-gray-500">系统版本更新或维护通知</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer" checked>
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">安全提醒</h4>
                                            <p class="text-xs text-gray-500">账号登录异常或安全风险提醒</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer" checked>
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">数据备份结果</h4>
                                            <p class="text-xs text-gray-500">备份成功或失败的通知</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer" checked>
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 业务通知设置 -->
                            <div class="mb-8">
                                <h3 class="text-md font-medium text-gray-700 mb-4">业务通知</h3>
                                <div class="space-y-4">
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">新用户注册</h4>
                                            <p class="text-xs text-gray-500">有新用户注册系统时通知</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer" checked>
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">食物数据提交</h4>
                                            <p class="text-xs text-gray-500">用户提交新食物数据时通知</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer" checked>
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">食谱发布提醒</h4>
                                            <p class="text-xs text-gray-500">新食谱发布时通知</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer">
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200">
                                        <div>
                                            <h4 class="text-sm font-medium text-gray-800">用户反馈</h4>
                                            <p class="text-xs text-gray-500">用户提交反馈或问题时通知</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer" checked>
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 通知方式设置 -->
                            <div class="mb-8">
                                <h3 class="text-md font-medium text-gray-700 mb-4">通知方式</h3>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">管理员邮箱</label>
                                        <input type="email" value="admin@nutritionist.com" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">通知发送优先级</label>
                                        <select class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                            <option value="realtime" selected>实时通知</option>
                                            <option value="daily">每日摘要</option>
                                            <option value="weekly">每周摘要</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- 通知方式选择 -->
                                <div class="space-y-3">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2" checked>
                                        <span class="text-sm text-gray-700">站内通知</span>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2" checked>
                                        <span class="text-sm text-gray-700">邮件通知</span>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                        <span class="text-sm text-gray-700">短信通知</span>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4 mr-2">
                                        <span class="text-sm text-gray-700">微信通知</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 保存按钮 -->
                            <div class="flex justify-end">
                                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md mr-2">
                                    取消
                                </button>
                                <button class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md">
                                    保存设置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    currentTab: 'basic', // 默认显示基本设置选项卡
                };
            },
            methods: {
                switchTab(tabName) {
                    this.currentTab = tabName;
                }
            },
            mounted() {
                // 为选项卡添加点击事件监听
                document.querySelectorAll('.tab-btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const tabName = btn.getAttribute('data-tab');
                        this.switchTab(tabName);
                    });
                });
            }
        });
        
        app.mount('#app');
    </script>
</body>
</html> 